<template>
    <div>
        <v-title>用户充值</v-title>
        <Nav></Nav>
        <el-row>
            <el-col :span="6" :offset="4">
                <h2>用户充值</h2>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="2" :offset="7">
                <span class="title">用户名</span>
            </el-col>
            <el-col :span="5">
                <el-input v-model="username" placeholder="请输入用户名" validate-event />
            </el-col>
        </el-row>
        <br />
        <el-row>
            <el-col :span="2" :offset="7">
                <span class="title">充值金额</span>
            </el-col>
            <el-col :span="5">
                <el-input onkeyup="value=value.replace(/[^\d]/g,'')" onblur="value=value.replace(/[^\d]/g,'')"
                    oninput="value=value.replace(/[^\d]/g,'')" v-model="money" placeholder="请输入充值金额" validate-event />
            </el-col>
        </el-row>
        <br />
        <br />
        <br /><br />
        <el-row>
            <el-col :span="2" :offset="9">
                <el-button type="primary" @click="recharge">充值</el-button>
            </el-col>
            <el-col :span="2" :offset="1">
                <el-button type="info" @click="onReset">重置</el-button>
            </el-col>
        </el-row>
    </div>
</template>
  
<script>
import VTitle from "@/components/Title";
import { userRecharge } from "@/api/index";
import Nav from "@/components/Nav";
export default {
    name: "",
    components: {
        VTitle,
        Nav
    },
    data() {
        return {
            username: '',
            money: 0,
        };
    },
    methods: {
        onReset() {
            // 重置
            this.username = '';
            this.money = 0;
        },
        async recharge() {
            if (this.money <= 0) {
                this.$message.error("充值金额不对，请检查充值金额~");
                return
            }

            await userRecharge(this.username, this.money).then((res) => {
                if (res.code == "200") {
                    if (res.data != null) {
                        this.$message.success('充值成功~');
                    }
                } else {
                    this.$message.error('充值失败，没有该用户存在~');
                }
            });
        },
    },
};
</script>
  
<style lang="less" scoped>
h2 {
    float: left;
    height: 34px;
    line-height: 34px;
    font-size: 24px;
    position: relative;
    margin-bottom: 20px;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
}

.title {
    line-height: 34px;
    font-size: 16px;
    font-weight: bold;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
    margin-bottom: 20px;
}

input {
    width: 40%;
}
</style>